<template>
  <div style="padding: 20px">
    <div class="fo-box">
      <el-row :gutter="30">
        <el-col :span="14">
          <div class="an-box">
            <div class="fo-title">
              <strong>整体概览</strong>
              <el-select v-model="yearCurrent" style="width: 240px">
                <el-option
                    v-for="(item,index) in ['2024','2025']"
                    :key="index"
                    :label="item"
                    :value="index"
                />
              </el-select>
            </div>
            <ul class="an-ul"
                style="border-left: 1px solid #ffffff;border-top: 1px solid #ffffff;border-right: 1px solid #ffffff">
              <li>
                <strong>52.13 </strong>
                <small>万度用电产量</small>
                <small>较上月 <span style="color: green">-24.65%</span></small>
              </li>
              <li> =</li>
              <li>
                <strong>614.32 <small>万元</small> </strong>
                <small>区产值</small>
                <small>较上月 <span style="color: green">-5.5%</span></small>
              </li>
              <li>
                ÷
              </li>
              <li>
                <strong>12689.99 <small>万千瓦时</small> </strong>
                <small>区用电量</small>
                <small>较上月 <span style="color: red">25.65%</span></small>
              </li>
            </ul>
            <ul class="an-ul" style="background-color: #ffffff">
              <li>
                <strong>
                  <el-icon style="color:#2167fa;">
                    <UserFilled/>
                  </el-icon>
                  影响因素 - 用人 </strong>
                <small>区用人数：<strong style="color: #0b63b7">8.19万</strong> </small>
                <small>较上月 <strong style="color: red">+437人/+0.54%</strong></small>
              </li>
              <li>
                <div style="width: 1px;height: 50px;background-color: #efefef"></div>
              </li>
              <li>
                <strong>
                  <el-icon style="color:#3abb8d;">
                    <Histogram/>
                  </el-icon>
                  影响因素 - 技改项目 </strong>
                <small>区用技改项目：<strong style="color: #0b63b7">91个</strong> </small>
                <small>较上月 <strong style="color: black">0人/0%</strong></small>
              </li>
              <li>
                <div style="width: 1px;height: 50px;background-color: #efefef"></div>
              </li>
              <li>
                <strong>
                  <el-icon style="color:#ff9861;">
                    <Menu/>
                  </el-icon>
                  影响因素 - 租赁地区 </strong>
                <small>区用租赁地块：<strong style="color: #0b63b7">143宗</strong> </small>
                <small>较上月 <strong style="color: black">0人/0%</strong></small>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="an-box">
            <div class="fo-title">
              <strong>整体趋势</strong>
              <el-select v-model="yearCurrent" style="width: 240px">
                <el-option
                    v-for="(item,index) in ['2024','2025']"
                    :key="index"
                    :label="item"
                    :value="index"
                />
              </el-select>
            </div>
            <div style="height: 305px;background-color: #ffffff">
              <overall-trend></overall-trend>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="fo-box">
      <div class="fo-title">
        <strong>区域情况</strong>
        <el-select v-model="yearCurrent" style="width: 240px">
          <el-option
              v-for="(item,index) in ['2024','2025']"
              :key="index"
              :label="item"
              :value="index"
          />
        </el-select>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="ar-box">
            <div class="ar-title">
              万度用电产值超过区属
            </div>
            <el-table :data="highData" height="200" border highlight-current-row
                      :header-cell-style="{color:'#000000',backgroundColor:'#f7f8fa'}"
                      @current-change="handleCurrentChange">
              <el-table-column prop="deptName" label="街道"/>
              <el-table-column prop="tenThousandOutputRate" label="万度用电产值"/>
              <el-table-column prop="tenThousandOutputRateBefore" label="环比上月">
                <template #default="scope">
                  <strong :style="{color:scope.row.tenThousandOutputRateBefore >0?'red':'green'}">
                    {{ formatPercentage(scope.row.tenThousandOutputRateBefore) }}</strong>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ar-box">
            <ul class="ar-influence">
              <li>
                <div>
                  <component is="UserFilled" class="icons" style="color: green"/>
                  影响因素 - 用人
                  <br>
                  {{ tableData.deptName }}用人 <strong
                    style="color: #0b63b7">{{ tableData.tenThousandOutputRateVO?.employeeCount }}</strong>
                  <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong
                    :style="{color:tableData.tenThousandOutputRateVO?.employeeCountBefore >0?'red':'green'}">
                  {{
                    tableData.tenThousandOutputRateVO?.employeeCountBefore
                  }}人/{{ formatPercentage(tableData.tenThousandOutputRateVO?.employeeCountRateBefore) }}
                </strong>
                </div>
              </li>
              <li>
                <div>
                  <component is="Promotion" class="icons" style="color: green"/>
                  影响因素 - 技改项目
                  <br>
                  {{ tableData.deptName }}技改项目 <strong
                    style="color: #0b63b7">{{ tableData.tenThousandOutputRateVO?.technologyChange }}</strong>
                  <small>人</small>
                  <span>...............</span>
                  <small>较上月</small>
                  <strong
                      :style="{color:tableData.tenThousandOutputRateVO?.technologyChangeBefore >0?'red':'green'}">
                    {{
                      tableData.tenThousandOutputRateVO?.technologyChangeBefore
                    }}人/{{ formatPercentage(tableData.tenThousandOutputRateVO?.technologyChangeRateBefore) }}
                  </strong>
                </div>
              </li>
              <li>
                <div>
                  <component is="Histogram" class="icons" style="color: green"/>
                  影响因素 - 租赁地块
                  <br>
                  {{ tableData.deptName }}租赁地块 <strong
                    style="color: #0b63b7">{{ tableData.tenThousandOutputRateVO?.useLand }}</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small>
                  <strong
                      :style="{color:tableData.tenThousandOutputRateVO?.useLandBefore >0?'red':'green'}">
                    {{ tableData.tenThousandOutputRateVO?.useLandBefore }}人/{{
                      formatPercentage(tableData.tenThousandOutputRateVO?.useLandRateBefore)
                    }}
                  </strong>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ar-box">
            <div class="ar-yx">
              <div>
                <el-image style="width: 45px;height: 45px;margin-right: 10px"
                          :src="utils.getAssetsFile('yx.png')"></el-image>
                <div>
                  影响企业 <strong
                    style="color: #0b63b7">{{ tableData.effectCompanyVO?.effectCompanyCount }}</strong><small
                    style="color: #0b63b7">家</small><small>(占比{{ formatPercentage(tableData.effectCompanyVO?.effectCompanyRate) }}%)</small>
                  <br>
                  <small>较上月：</small> <strong
                    :style="{color:tableData.effectCompanyVO?.effectCompanyBefore >0?'red':'green'}">{{ tableData.effectCompanyVO?.effectCompanyBefore }}家/{{ formatPercentage(tableData.effectCompanyVO?.effectCompanyRateBefore) }}</strong>
                </div>
              </div>
              <div>
                <el-image style="width: 45px;height: 45px;margin-right: 10px"
                          :src="utils.getAssetsFile('wyx.png')"></el-image>
                <div>
                  未影响企业 <strong
                    style="color: #0b63b7">{{ tableData.notEffectCompanyVO?.effectCompanyCount }}</strong><small
                    style="color: #0b63b7">家</small><small>(占比{{ formatPercentage(tableData.notEffectCompanyVO?.effectCompanyRate) }}%)</small>
                  <br>
                  <small>较上月：</small> <strong
                    :style="{color:tableData.notEffectCompanyVO?.effectCompanyBefore >0?'red':'green'}">{{ tableData.notEffectCompanyVO?.effectCompanyBefore }}家/{{ formatPercentage(tableData.notEffectCompanyVO?.effectCompanyRateBefore) }}</strong>
                </div>
              </div>
            </div>
            <ul class="ar-body">
              <li>
                <div> 用人影响企业 <strong
                    style="color: #0b63b7">{{ tableData.effectCompanyVO?.companyVO?.employeeCount }}</strong> <small
                    style="color: #0b63b7">家</small>
                  <small>占比</small> <strong
                      style="color: #0b63b7">{{ formatPercentage(tableData.effectCompanyVO?.companyVO?.employeeCountRate) }}</strong>
                </div>
                <div><small>较上月</small> <strong
                    :style="{color:tableData.effectCompanyVO?.companyVO >0?'red':'green'}">{{ tableData.effectCompanyVO?.companyVO?.employeeCountBefore }}家/{{ formatPercentage(tableData.effectCompanyVO?.companyVO?.employeeCountRateBefore) }}</strong>
                </div>
              </li>
              <li>
                <div> 技改影响企业 <strong style="color: #0b63b7">{{ tableData.effectCompanyVO?.companyVO?.technologyChange }}</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong
                      style="color: #0b63b7">{{ formatPercentage(tableData.effectCompanyVO?.companyVO?.technologyChangeRate) }}</strong>
                </div>
                <div><small>较上月</small> <strong
                    :style="{color:tableData.effectCompanyVO?.technologyChangeBefore >0?'red':'green'}">{{ tableData.effectCompanyVO?.companyVO?.technologyChangeBefore }}家/{{ formatPercentage(tableData.effectCompanyVO?.companyVO?.technologyChangeRateBefore) }}</strong>
                </div>
              </li>
              <li>
                <div> 租赁影响企业 <strong style="color: #0b63b7">{{ tableData.effectCompanyVO?.companyVO?.useLand }}</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong
                      style="color: #0b63b7">{{ formatPercentage(tableData.effectCompanyVO?.companyVO?.useLandRate) }}</strong>
                </div>
                <div><small>较上月</small> <strong
                    :style="{color:tableData.effectCompanyVO?.useLandBefore >0?'red':'green'}">{{ tableData.effectCompanyVO?.companyVO?.useLandBefore }}家/{{ formatPercentage(tableData.effectCompanyVO?.companyVO?.useLandRateBefore) }}</strong>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="ar-box">
            <div class="ar-title">
              万度用电产值与区属持平(相差±5%)
            </div>
            <el-table :data="flatData" height="200" border
                      :header-cell-style="{color:'#000000',backgroundColor:'#f7f8fa'}">
              <el-table-column prop="deptName" label="街道"/>
              <el-table-column prop="tenThousandOutputRate" label="万度用电产值"/>
              <el-table-column prop="tenThousandOutputRateBefore" label="环比上月">
                <template #default="scope">
                  <strong :style="{color:scope.row.tenThousandOutputRateBefore >0?'red':'green'}">
                    {{ formatPercentage(scope.row.tenThousandOutputRateBefore) }}</strong>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ar-box">
            <ul class="ar-influence">
              <li>
                <div>
                  <component is="UserFilled" class="icons" style="color: green"/>
                  影响因素 - 用人
                  <br>
                  岳林街道用人 <strong style="color: #0b63b7">3378</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong style="color: red">257人/8.27%</strong>
                </div>
              </li>
              <li>
                <div>
                  <component is="Promotion" class="icons" style="color: green"/>
                  影响因素 - 技改项目
                  <br>
                  岳林街道用人 <strong style="color: #0b63b7">3378</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong style="color: red">257人/8.27%</strong>
                </div>
              </li>
              <li>
                <div>
                  <component is="Histogram" class="icons" style="color: green"/>
                  影响因素 - 租赁地块
                  <br>
                  岳林街道用人 <strong style="color: #0b63b7">3378</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong style="color: red">257人/8.27%</strong>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ar-box">
            <div class="ar-yx">
              <div>
                <el-image style="width: 45px;height: 45px;margin-right: 10px"
                          :src="utils.getAssetsFile('yx.png')"></el-image>
                <div>
                  影响企业 <strong style="color: #0b63b7">30</strong><small style="color: #0b63b7">家</small><small>(占比42.24%)</small>
                  <br>
                  <small>较上月：</small> <strong style="color:green;">9家/23.8%</strong>
                </div>
              </div>
              <div>
                <el-image style="width: 45px;height: 45px;margin-right: 10px"
                          :src="utils.getAssetsFile('wyx.png')"></el-image>
                <div>
                  未影响企业 <strong style="color: #0b63b7">41</strong><small style="color: #0b63b7">家</small><small>(占比42.24%)</small>
                  <br>
                  <small>较上月：</small> <strong style="color:green;">9家/23.8%</strong>
                </div>
              </div>
            </div>
            <ul class="ar-body">
              <li>
                <div> 用人影响企业 <strong style="color: #0b63b7">25</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong style="color: #0b63b7">83.33%</strong></div>
                <div><small>较上月</small> <strong style="color: green">12家/42.43%</strong></div>
              </li>
              <li>
                <div> 用人影响企业 <strong style="color: #0b63b7">25</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong style="color: #0b63b7">83.33%</strong></div>
                <div><small>较上月</small> <strong style="color: green">12家/42.43%</strong></div>
              </li>
              <li>
                <div> 用人影响企业 <strong style="color: #0b63b7">25</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong style="color: #0b63b7">83.33%</strong></div>
                <div><small>较上月</small> <strong style="color: green">12家/42.43%</strong></div>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="ar-box">
            <div class="ar-title">
              万度用电产值低于区属
            </div>
            <el-table :data="lowData" height="200" border
                      :header-cell-style="{color:'#000000',backgroundColor:'#f7f8fa'}">
              <el-table-column prop="deptName" label="街道"/>
              <el-table-column prop="tenThousandOutputRate" label="万度用电产值"/>
              <el-table-column prop="tenThousandOutputRateBefore" label="环比上月">
                <template #default="scope">
                  <strong :style="{color:scope.row.tenThousandOutputRateBefore >0?'red':'green'}">
                    {{ formatPercentage(scope.row.tenThousandOutputRateBefore) }}</strong>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ar-box">
            <ul class="ar-influence">
              <li>
                <div>
                  <component is="UserFilled" class="icons" style="color: green"/>
                  影响因素 - 用人
                  <br>
                  岳林街道用人 <strong style="color: #0b63b7">3378</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong style="color: red">257人/8.27%</strong>
                </div>
              </li>
              <li>
                <div>
                  <component is="Promotion" class="icons" style="color: green"/>
                  影响因素 - 技改项目
                  <br>
                  岳林街道用人 <strong style="color: #0b63b7">3378</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong style="color: red">257人/8.27%</strong>
                </div>
              </li>
              <li>
                <div>
                  <component is="Histogram" class="icons" style="color: green"/>
                  影响因素 - 租赁地块
                  <br>
                  岳林街道用人 <strong style="color: #0b63b7">3378</strong> <small>人</small>
                  <span>...............</span>
                  <small>较上月</small> <strong style="color: red">257人/8.27%</strong>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ar-box">
            <div class="ar-yx">
              <div>
                <el-image style="width: 45px;height: 45px;margin-right: 10px"
                          :src="utils.getAssetsFile('yx.png')"></el-image>
                <div>
                  影响企业 <strong style="color: #0b63b7">30</strong><small style="color: #0b63b7">家</small><small>(占比42.24%)</small>
                  <br>
                  <small>较上月：</small> <strong style="color:green;">9家/23.8%</strong>
                </div>
              </div>
              <div>
                <el-image style="width: 45px;height: 45px;margin-right: 10px"
                          :src="utils.getAssetsFile('wyx.png')"></el-image>
                <div>
                  未影响企业 <strong style="color: #0b63b7">41</strong><small style="color: #0b63b7">家</small><small>(占比42.24%)</small>
                  <br>
                  <small>较上月：</small> <strong style="color:green;">9家/23.8%</strong>
                </div>
              </div>
            </div>
            <ul class="ar-body">
              <li>
                <div> 用人影响企业 <strong style="color: #0b63b7">25</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong style="color: #0b63b7">83.33%</strong></div>
                <div><small>较上月</small> <strong style="color: green">12家/42.43%</strong></div>
              </li>
              <li>
                <div> 用人影响企业 <strong style="color: #0b63b7">25</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong style="color: #0b63b7">83.33%</strong></div>
                <div><small>较上月</small> <strong style="color: green">12家/42.43%</strong></div>
              </li>
              <li>
                <div> 用人影响企业 <strong style="color: #0b63b7">25</strong> <small style="color: #0b63b7">家</small>
                  <small>占比</small> <strong style="color: #0b63b7">83.33%</strong></div>
                <div><small>较上月</small> <strong style="color: green">12家/42.43%</strong></div>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {regionalSituationList} from '../data/data.js'
import {onMounted, ref, watch} from "vue";
import OverallTrend from "@/views/situationalAwareness/Echarts/overallTrend.vue";
import utils, {formatPercentage} from "@/utils/index.js";

const yearCurrent = ref(0)

const highData = ref([])
const lowData = ref([])
const flatData = ref([])
const tableData = ref({})

const getData = (key) => {
  highData.value = regionalSituationList[key].high
  lowData.value = regionalSituationList[key].low
  flatData.value = regionalSituationList[key].flat
}

const handleCurrentChange = (currentRow, oldCurrentRow, event) => {
  let index = 0
  if (currentRow) {
    index = highData.value.indexOf(currentRow);
  }
  tableData.value = highData.value[index]
  console.log(tableData.value)
}

watch(yearCurrent, (newValue, oldValue) => {
  getData(newValue)
});

onMounted(() => {
  getData(0)
  handleCurrentChange(null)
})

</script>


<style scoped lang="scss">
.an-box {
}

.an-ul {
  padding: 40px 0;
  display: flex;

  li {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > strong {
      font-size: 20px;
      font-weight: bold;
    }

    > small {
      font-size: 14px;
    }
  }

  li:nth-child(odd) {
    width: 50%;
  }

  li:nth-child(even) {
    width: 10%;
    font-size: 40px;
  }
}

.fo-box {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f7f8fa;
}

.fo-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

.ar-title {
  padding: 10px 10px 10px 20px;
  font-weight: bold;
  font-size: 14px;
  position: relative;

  &::before {
    content: '✦';
    position: absolute;
    top: 10px;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #0b63b7;
    border-radius: 50%;
  }
}
.ar-box {
  height: 300px;
  background-color: #ffffff;
}

.ar-influence {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  > li {
    height: 30%;
    background-color: #f0f9f5;
    display: flex;
    justify-content: center;
    align-items: center;

    > div {
      width: 80%;
    }

  }
}

.icons {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.ar-yx {
  padding: 30px 30px 20px 30px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;

  strong {
    font-size: 1.2em;
  }
  > div {
    width: 45%;
    display: flex;
  }
}

.ar-body {
  margin: 0 20px 20px 20px;
  background-color: #f7f8fa;
  height: 180px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 14px;
  position: relative;


  &::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 40px;
    width: 20px;
    height: 20px;
    background-color: #f7f8fa;
    transform: rotate(45deg);;
  }

  > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;

    small {
      color: #999999;
    }

    strong {
      font-size: 1.1em;
    }
  }
}
</style>
